<html>
  <head>
    <title>Google Calendar</title>
    <link rel="stylesheet" href="/stylesheets/calendar/blue/style.css">
    <style type="text/css">
      .specialDay1 {
        padding: 0.7em 1em;
        border-right: 1px solid white;
        font-size: 0.7em;
        background-color: green; color:black;}
      .specialDay {background-color: red; color: black;}

    </style>
    <script type='text/javascript'>

      function goto_month(year,month)
      {
        location.href='/events_details/index?timeframe=month&date='+year+'-'+month+'-1';
      }

      function displaymessage(cellText,date)
      {
        location.href="/events_details/index?timeframe=day&date="+date
<%#*tooltip=get_details(cellText,"")%>

<%#*document.getElementById("detail_view").innerHTML=tooltip;%>
  }


  function displaymessage1(cellText,new_m)
  {

    var tooltip="";
    var films="";
    var others=""


<%@event_ob.sort_by {|u| u.start}.each{|r|%>

  <%dateTimeStart=DateTime.parse(r.start.to_s)%>
  <%dateTimeEnd=DateTime.parse(r.end.to_s)%>

      var cell="<%=dateTimeStart.mday%>";
      if(cell==cellText){

  <%if r.event_type=="film"%>
          films=films+"<font size='2'><b><a href='<%=r.webpage%>' onClick='window.resizeTo(screen.width,screen.height)' ><%=r.title %></a></b><br> Location :"+
            "<%=r.where %><br> Description : <%=r.content %></font><br><br>"

  <%else%>
          others=others+"<font size='2'><b><a href='<%=r.webpage%>' onClick='window.resizeTo(screen.width,screen.height)' ><%=r.title %> : <%=dateTimeStart.strftime("%I:%M%p") %>"+
            "<%=dateTimeEnd.strftime(" to %I:%M%p") %></a></b><br> Location:"+
            "<%=r.where %><br> Description : <%=r.content %></font><br><br>"

  <%end%>

      }
<%}%>
    if (films!="")
      tooltip=tooltip+"<font size='2'><b><u>Films</u></b></font><br>"+films;

    if (others!=""){
      tooltip=tooltip+"<font size='2'><b><u>Others</u></b></font><br>"+others;
    }



    if(tooltip!=""){
      var newDoc=window.open('','','location=no,toolbar=no,scrollbars=yes,width=300,height=350')
      var txt="<html><body>"+tooltip+"</body></html>";
      newDoc.document.write(txt);
      newDoc.moveTo(400,300);
      newDoc.document.close()
    }

  }



  function colorChangeIn(cellOb,cellText)
  {
    tooltip=get_details(cellText,"")

    document.getElementById("detail_view").innerHTML=tooltip;

  }




  function get_details(cellText,filter_type)
  {

    var html_text="";

<%temp=Date.parse("2000-1-1")%>
<%@event_ob.sort_by {|u| u.start}.each{|r|%>

  <%dateTimeStart=DateTime.parse(r.start.to_s)%>
  <%dateTimeEnd=DateTime.parse(r.end.to_s)%>
      var month_day="<%=dateTimeStart.mday%>";


      var event_type="Others"
  <%if not r.event_type.nil? %>
        event_type='<%=r.event_type%>'
  <%end%>

      if(filter_type==event_type | filter_type=="all" ){


        if(cellText=="" || month_day==cellText){

  <%if Date.parse(r.start.to_s)!=temp%>

            html_text=html_text+"<hr><font size='3' color='Grey'><b><%=dateTimeStart.strftime("%A %B %d %Y") %></b></font><br>";

  <%end%>


          if (event_type=="film"){

            html_text=html_text+"<font size='2'><b>"+
              " <%=r.title %></b><br><%=r.event_type.to_s %> | Location : "+
              "<%=r.where %> | Description : <%=r.content.to_s %></font><br><br>"

          }
          else{
            html_text=html_text+"<font size='2'><b><%=r.title %></b><br> <%=r.event_type.to_s %> | <%=dateTimeStart.strftime("%I:%M%p") %>"+
              "<%=dateTimeEnd.strftime(" to %I:%M%p") %> |   Location : "+
              "<%=r.where %> | Description : <%=r.content.to_s %></font><br><br>"

          }

  <%  temp=Date.parse(r.start.to_s)%>

        }
      }

<%}%>
    return html_text;


  }



  function colorChangeOut(cellOb)
  {

<%#*hideddrivetip();%>
<%#*cellOb.style.backgroundColor='red'%>

  }

    </script>

<style type="text/css">

    #dhtmltooltip{
    position: absolute;
    left: -300px;
    width: 150px;
    border: 1px solid black;
    padding: 2px;
    background-color: lightyellow;
    visibility: hidden;
    z-index: 100;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
    }

    #dhtmlpointer{
    position:absolute;
    left: -300px;
    z-index: 101;
    visibility: hidden;
    }

    </style>



  </head>
  <body>

    <%#*<script LANGUAGE="JavaScript" SRC="javascripts/tooltip.js"></script>%>


    <h1>Events Calendar</h1>
    <table border="1">
      <tr>
        <td align="center">
          Calendar
        </td>
        <td width="700">
          <script type='text/javascript'>
            function display_filter_result(type){
              if(type=='films'){
                var de=get_details('','film');
                document.getElementById("events_div").innerHTML=de
              }
              if(type=='all'){
                var de=get_details('','all');
                document.getElementById("events_div").innerHTML=de
              }
              if(type=='Others'){
                var de=get_details('','Others');
                document.getElementById("events_div").innerHTML=de
              }

            }
          </script>
          <a onclick="display_filter_result('all')" >All</a> |
          <a onclick="display_filter_result('films')" >Films Only</a> |
          <a onclick="display_filter_result('Others')" >Others Only</a>

        </td>
      </tr>

      <tr align="left" valign="top">
        <td height="210" width="250">
          <%=calendar(:previous_month_text   => "&lt;&lt;prev",:next_month_text   =>"Next&gt;&gt;",:year => @year.to_i, :month => @month.to_i) do |d|
            if @events.include?(d)

              [d.mday, {:class => "specialDay"}]

              #else
              #[d.mday, {:class => "specialDay1"}]
            else
              if @films.include?(d)

                [d.mday, {:class => "specialDay1"}]

              end
            end


          end
        %>
        </td>


        <td rowspan="2">

          <div id="events_div">
            <script type='text/javascript'>
              document.write(get_details("","all"));
            </script>
          </div>

        </td>
      </tr>

      <tr align="left" valign="top" style="border-top-color:green">

        <td>


          <a href="/events_details/index?timeframe=day&date=<%=Date.today.to_s%>" >Today's events</a><hr>
          <a href="/events_details/index?timeframe=this_week&date=<%=Date.today.to_s%>" >This week's events</a><hr>
          <a href="/events_details/index?timeframe=month&date=<%=Date.today.to_s%>" >This month's events</a><hr>


          <div id="detail_view">

          </div>

        </td>

      </tr>

    </table>



  </body>
</html>